<template>
	<view>
		<!-- 菜单 -->
		<!--#ifdef APP -->
		<u-sticky offset-top="0">
			<!--#endif-->
			<view class="top-warp">
				<u-tabs :list="tabs" @click="tabChange"
					itemStyle="width: 26%; height:80rpx; overflow:hidden;white-space: nowrap;text-overflow: ellipsis; -o-text-overflow:ellipsis;">
				</u-tabs>
			</view>
			<!--#ifdef APP -->
		</u-sticky>
		<!--#endif-->
		<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback">
			<!-- 数据列表 -->
			<view class="list" v-for="(item,index) in goods" :key="index">
				<view class="cont" v-for="(i,x) in item.list" :key="x" @click="gotow(i)">
					<image :src="i.avatar" mode=""></image>
					<view class="">
						{{i.name}}
					</view>
				</view>
			</view>
		</mescroll-body>
		<zero-back-top :scrollTop="scrollTop"></zero-back-top>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import Mypostlist from "@/components/Mypostlist.vue"
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			Mypostlist
		},
		data() {
			return {
				upOption: {
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 搜索无数据 ~', // 提示
					}
				},
				goods: [], //列表数据
				tabs: [{
					name: '全部',
				}, {
					name: '喜欢的',
				}, {
					name: '关注人数最多',
				}],
				index: 0,
				scrollTop: 0,
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad() {
			this.locale()
			this.userinfo(0)
		},
		methods: {
			gotow(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/user/card/details/index?id=' + item.id
				})
			},
			userinfo(index) {
				let params = {
					map: "applet_business_card_rank",
					sort:'show',
					page:0
				}
				if (index == 0) {
					params.sort = 'show'
				} 
				if (index == 1) {
					params.sort = 'like'
				} 
				if (index == 2) {
					params.sort = 'collection'
				} 
				console.log(params)
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.goods = res.data.data.nameCard
						this.mescroll.endSuccess(res.data.data.length);
					} else {
						this.mescroll.endSuccess(0);
					}
				})
			},
			locale() {
				if (this._i18n.locale == 'zh') {
					this.tabs = [{
						name: '全部',
					}, {
						name: '喜欢的',
					}, {
						name: '关注人数最多',
					}]
				} else {
					this.tabs = [{
						name: 'Total Viewd',
					}, {
						name: 'Top Likes',
					}, {
						name: 'Top Followed'
					}]
				}
			},
			downCallback(page) {
				this.userinfo(this.index)
			},
			upCallback() {
				return
			},
			// 切换菜单
			tabChange(e) {
				console.log(e)
				this.index = e.index
				this.mescroll.resetUpScroll() // 再刷新列表数据
				this.goods = [] // 先置空列表,显示加载进度
				this.userinfo(e.index)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.list {
		.cont {
			display: flex;
			align-items: center;
			padding: 20rpx;
			margin-top: 20rpx;
			background-color: #fff;
			font-size: 28rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
				margin-right: 20rpx;
			}
		}
	}

	.top-warp {
		width: 100%;
		background-color: #ffffff;

		.tip {
			font-size: 28upx;
			text-align: center;
		}
	}
</style>
